import React, { useEffect, useRef, useState } from 'react';
import './index.scss'

// import 'proj4leaflet'
// import 'leaflet.chinatmsproviders'
// import '@tencent/tc-maps/dist/tc-maps-all.min.css';
import L, { marker } from "leaflet";
var map = null;
export default function Index() {
  const mapkey = '03cd4b8189df52cc8fba3d9fd345f747'
  const mapContainerRef = useRef(null);
 
  const [loading, setLoading] = useState(true);
  const [SecureEnv, setEnv] = useState(false);
  const [destory, setDestory] = useState(false);
  const [worldType, setWorldType] = useState("vec");
  // const initMap = () => {
  //   console.log("99999")
  //   setLoading(false);
  //   // if (!window.T) return;
  //   console.log(433443344334, "--------")
  //   // 初始化地图对象
  //   const map = L.Map('map');
  //   console.log(map,"--------")
  //   // map.container = mapContainerRef.current
  //   const lngLat = new window.T.LngLat(39.984104, 116.457584);
  //   // 设置显示地图的中心点和级别
  //   map.centerAndZoom(lngLat, 18);
  //   // 允许鼠标滚轮缩放地图
  //   map.enableScrollWheelZoom();
  //   // 创建标注对象
  //   const marker = new window.T.Marker(lngLat);
  //   // 向地图上添加标注
  //   map.addOverLay(marker);

  //   // 如果要给标注添加点击事件，例如：跳转高德地图，建议用useRef设置marker，并在useEffect
  //   // 的return中销毁事件监听器
  //   // marker.addEventLisner("click",()=>{
  //   //   window.open("...")
  //   // })

  //   // 创建信息窗口对象
  //   const label = new window.T.Label({
  //     text: '文字标注介绍',
  //     position: lngLat,
  //     offset: new window.T.Point(5, -30),
  //   });
  //   map.tileLayer(
  //     `https://t{s}.tianditu.gov.cn/${worldType}_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=${worldType}&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${mapkey}`,
  //     {
  //       subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
  //       transparent: true,
  //       //zoomOffset:1,
  //       zIndex: 3,
  //     }
  //   );
  //   map.addOverLay(label);
  // };
  const initMap = () => {
    // map = new TMap({
    //   container: mapContainerRef.current, // 地图容器div的id
    //   width: 500, // 设置地图容器宽度
    //   height: 400, // 设置地图容器高度
    //   zoom: 12, // 设置地图缩放级别
    //   center: new TMap.LatLng(39.984104, 116.457584), // 设置地图中心点坐标
    // });
  //   const map_options = {
  //     attributionControl: false,
  //     minZoom: 1,
  //     maxZomm: 10,
  //     zoomControl: false,
  //   };

  //  const map = L.map(mapContainerRef.current, map_options);
    //   map.setView([0, 180], 3);
    
    console.log(L.map,"000000")
    const map_options = {
      attributionControl: false,
      zoomControl: false,
      maxZoom: 20,
      minZoom: 3,
      center: [39.984104, 116.457584],
    };

    L.map(mapContainerRef.current,  map_options);
  //  const map = L.map("mapId", {
  //     center: [31.6, 108.5],
  //     zoom: 5,
  //     maxZoom: 20,
  //     minZoom: 3,
  //     zoomControl: false,
  //     attributionControl: false,
  //  });
    // console.log(map,"---------")
  };

  useEffect(() => {
    initMap();
    // const isSecure = window.location.href.includes('xxx.cn');
    // if (isSecure) {
    //   setTimeout(() => {
    //     // initMap();
    //   }, 500);
    // }
    return () => {
      // 清理函数，如需要销毁地图对象等
    };
  }, []);
  return (
    //  id="map"
    <div  ref={mapContainerRef} style={{ width: '100%', height: '100%' }} />
  );
}
